<template>
  <el-main class="message-input" style="padding: 0 !important">
    <el-row style="width: 100%">
      <el-col class="content-wrapper" :span="23">
        <el-input
          v-model="message"
          :autosize="{
            minRows: 3,
            maxRows: 3,
          }"
          class="input input-txt"
          resize="none"
          type="textarea"
          placeholder="通过crtl+回车换行;通过回车发送消息;"
          @keydown.enter="sendMessage($event)"
        >
        </el-input>
      </el-col>
      <el-col class="btn-wrapper" :span="1">
        <img
          @click="sendMessage"
          class="enter_icon el-tooltip__trigger el-tooltip__trigger btn-image"
          :src="startingContainer ? 'img/pause_session.c3f2da00.svg' : 'img/send.6d617ab7.svg'"
        />
      </el-col>
    </el-row>
  </el-main>
</template>
<script>
export default {
  name: 'ChatMessageInput',
  components: {},
  props: {
    send: {
      type: Function,
      default: null,
    },
    start: {
      type: Boolean,
      default: false,
    },
    model: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      message: '',
      startingContainer: false,
    };
  },
  mounted() {
    this.startingContainer = this.start;
  },
  methods: {
    sendMessage(event) {
      if (event.keyCode == 13) {
        if (!event.ctrlKey) {
          event.preventDefault();
        } else {
          this.message += '\n';
          return;
        }
      }
      let imageBase64 = '';
      var that = this;

      var aStr = that.message;
      var re = /(\n(?=(\n+)))+/g;
      var str = aStr.replace(re, '');
      if (str == '' || str == '\n') {
        that.message = '';
        that.$message.warning('请输入对话内容');
        return;
      }
      let request = {
        image_url: imageBase64,
        message: that.message,
        fileId: this.fileId,
        path: this.path,
      };
      that.$emit('send', request);
      // 发送完清除
      that.message = '';
      that.startingContainer = true;
    },
  },
  watch: {
    start: {
      handler(newValue) {
        this.startingContainer = newValue;
      },
      immediate: false,
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.btn-wrapper {
  font-size: 48px;
  .btn-image {
    cursor: pointer;
  }
}
</style>
